<template>
    <div class="data-overview">
      <div 
        v-for="(item, index) in data"
        :key="index"
        class="overview-item"
        :class="{ 'highlight': item.highlight }"
      >
        <div class="value">{{ item.value }}</div>
        <div class="title">{{ item.title }}</div>
      </div>
    </div>
  </template>
  
  <script setup>
  defineProps({
    data: {
      type: Array,
      required: true,
      validator: value => value.every(item => 
        item.title && 
        item.value
      )
    }
  })
  </script>
  
  <style lang="scss" scoped>
  .data-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    padding: 16px;
    background: var(--van-white);
  
    .overview-item {
      text-align: center;
      padding: 12px;
      border-radius: 8px;
      background: var(--van-gray-1);
  
      &.highlight {
        background: var(--van-primary-color);
        
        .value, .title {
          color: var(--van-white);
        }
      }
  
      .value {
        font-size: 18px;
        font-weight: 600;
        color: var(--van-text-color);
        margin-bottom: 4px;
      }
  
      .title {
        font-size: 12px;
        color: var(--van-gray-6);
      }
    }
  }
  </style>